<template>
	<view class="content">
		<view class="u-content">
			<u-text :text="data.title" size="16" color="#1B1917" bold></u-text>
			<image style="width: 100%;" :src="data.mainImageUrl" mode=""></image>
			<u-parse :content="data.content" :selectable="true" :tagStyle="style"></u-parse>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		selectActicleById
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				content: '',
				data: undefined,
				style: {
					// 字符串的形式
					p: 'font-size:14px;line-height: 27px;',
					text: 'font-size:14px;line-height: 27px;',
					span: 'font-size: 30rpx'
				}
			}
		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),
		},
		onLoad(res) {
			console.log(JSON.stringify(res))
			this.selectByIdHttp(res.id)

		},
		methods: {
			/**
			 * 基础跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			/**
			 * 验证登录跳转路由
			 * @param {Object} url
			 */
			navToKeyLogin(url) {
				if (this.hasLogin) {
					this.navTo(url);
				} else {
					console.log("进行注册/登录！")
					this.registerShow = true;
				}
			},
			/**
			 * 多功能跳转路由
			 * @param {Object} item
			 */
			isClick(item) {
				this.$ut.isClick(item)
			},
			// 文章列表
			async selectByIdHttp(articleId) {
				await selectActicleById({
					"id": articleId
				}).then(res => {
					// console.log(res)
					this.data = res;

				}).catch(e => {
					this.$ut.msg(e)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 96%;
		padding: 2%;
		border-radius: 5px;
	}

	.u-content {
		width: 94%;
		padding: 20rpx;
		background: #fff;
		line-height: 2;
	}
</style>